<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="flex-middle">
      <div class="plr15">
        <el-date-picker
          v-model="date"
          type="daterange"
          :value-format="formatType"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :disabled-date="handleDisabledDate"
        />
      </div>
      <el-button
        v-blur
        class="ml15"
        :icon="Search"
        type="primary"
        plain
        @click="handleSearch">
        搜索
      </el-button>
    </div>
    <div class="t mtb15">
      <el-row>
        <el-col
          align="center"
          :span="6"
        >
          <div class="flex-center">
            <img
              v-lazy="alarm01"
              class="alarm-icon"
            >
            <div class="flex-col-start ml8">
              <div class="fn12 text gray">累计告警</div>
              <div class="alarm-num">
                --
                <span class="fn12 text gray">次</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col
          align="center"
          :span="6"
        >
          <div class="flex-center">
            <img
              v-lazy="alarm02"
              class="alarm-icon"
            >
            <div class="flex-col-start ml8">
              <div class="fn12 text gray">同比</div>
              <div class="alarm-num">
                --
                <span class="fn12 text gray">%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col
          align="center"
          :span="6"
        >
          <div class="flex-center">
            <img
              v-lazy="alarm03"
              class="alarm-icon"
            >
            <div class="flex-col-start ml8">
              <div class="fn12 text gray">环比</div>
              <div class="alarm-num">
                --
                <span class="fn12 text gray">%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col
          align="center"
          :span="6"
        >
          <div class="flex-center">
            <img
              v-lazy="alarm04"
              class="alarm-icon"
            >
            <div class="flex-col-start ml8">
              <div class="fn12 text gray">安全评估</div>
              <div class="alarm-num">良好</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <SolidBorder class="h200 mt15">
        <EChartBase :options="lineOptions" />
      </SolidBorder>
      <SolidBorder class="h200 mt15">
        <el-row class="h100">
          <el-col
            :span="6"
            align="center"
          >
            <EChartBase :options="pieTypeOptions" />
          </el-col>
          <el-col
            :span="6"
            align="center"
          >
            <EChartBase :options="pieTimeOptions" />
          </el-col>
          <el-col
            :span="6"
            align="center"
          >
            <EChartBase :options="pieDeviceOptions" />
          </el-col>
          <el-col
            :span="6"
            align="center"
          >
            <EChartBase :options="pieTypeOptions2" />
          </el-col>
        </el-row>
      </SolidBorder>
      <div class="st-h mt15 relative">
        <SortTable class="sort-table h100"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import alarm01 from '@imgs/alarm01.png'
import alarm02 from '@imgs/alarm02.png'
import alarm03 from '@imgs/alarm03.png'
import alarm04 from '@imgs/alarm04.png'
import SolidBorder from '@/components/SolidBorder/index.vue'
import EChartBase from '@/components/Echarts/base.vue'
import { getOptions } from './lineOptions'
import { getOptions as getPieTypeOptions } from './pieTypeOptions'
import SortTable from '@/components/SortTable/index.vue'
const date = ref<string>('')
const formatType = ref('YYYY-MM-DD')
const lineOptions = reactive(
  getOptions(
    ['1', '2', '3'],
    [1, 2.4, 3]
  )
)
const pieTypeOptions = reactive(
  getPieTypeOptions('统计类型',
    [
      { value: 0, name: '遥信' },
      { value: 0, name: '遥测' }
    ]
  )
)
const pieTimeOptions = reactive(
  getPieTypeOptions('时间统计', [{ value: 0, name: '时间统计' }])
)
const pieDeviceOptions = reactive(
  getPieTypeOptions('设备统计', [{ value: 0, name: '设备统计' }])
)
const pieTypeOptions2 = reactive(
  getPieTypeOptions('类型统计', [{ value: 0, name: '类型统计' }])
)
const handleSearch = () => {
  console.log('date：', date)
}

const handleDisabledDate = (d: Date) => {
  const now = new Date()
  if (d.getTime() - now.getTime() > 0) return true
}

</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
$gray: rgba(255, 255, 255, 0.64);
.gray {
  color: $gray;
}
.h200 {
  height: 20rem;
}
.container {
  height: 100%;
  width: calc(100% - 20rem);
  color: $color;
  padding: 1.5rem;
  box-sizing: border-box;
}
.eh {
  height: calc(100vh - 6.9rem - 20rem - 3rem - 6rem - 70px);
}
.h100 {
  height: 100%;
}
.st-h {
  height: calc(100% - 20rem - 1.5rem - 20rem - 1.5rem - 1.5rem - 5.7rem);
  // padding: 1.5rem;
  box-sizing: border-box;
}
.sort-table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.alarm-icon {
  width: 5.7rem;
  height: 5.7rem;
}
.alarm-num {
  font-size: 2.4rem;
  color: $primary_color;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input__wrapper) {
  background: transparent;
}
:deep(.el-range-input) {
  --el-text-color-regular: $color;
}
:deep(.el-range-separator) {
  --el-text-color-primary: $color;
}
.t {
  height: calc(100% - 3rem - 32px);
  width: 100%;
  position: relative;
}
:deep(.el-button) {
  background: transparent;
}
</style>
